<template>
  <swiper class="swiper"
          indicator-dots
          indicator-active-color="#ff7555"
          autoplay
          circular
          :interval="3000">
    <template v-for="(item, index) in banners" :key="item.acm">
      <swiper-item class="swiper-item" @click="handleItemClick(item)">
        <image :src="item.image" mode="widthFix" class="image"></image>
      </swiper-item>
    </template>
  </swiper>
</template>

<script setup>
  const props = defineProps({
    banners: {
      type: Array,
      default: () => []
    }
  })
  
  const emit = defineEmits(['bannerItemClick'])
  const handleItemClick = (item) => {
    emit('bannerItemClick', item.link)
  }
</script>

<style lang="less">
  .swiper {
    .swiper-item {
      .image {
        width: 100%;
      }
    }
  }
</style>